<!-- *@description:  -->
<!-- *@Author: M.佑先生 -->
<!-- *@Date: 2025-07-11 09:41:01 -->
<template>
	<div class="BusinessCenter">
		<div class="center-area">
			<div class="center-modules">
				<div class="module-group" v-for="(mod, i) in modules.slice(0, 2)" :key="mod.title">
					<!-- 左侧菜单 -->
					<div class="side-list left-list" v-if="mod.leftMenus && mod.leftMenus.length">
						<div class="side-item" v-for="item in mod.leftMenus" :key="item">
							{{ item }}
						</div>
					</div>
					<img src="@/assets/img/yinying.png" alt="" class="lfPngBox" />
					<!-- 模块图标+标题 -->
					<div class="module">
						<div class="icon-wrap">
							<img v-if="mod.icon" :src="mod.icon" class="module-icon" />
						</div>
						<div class="module-title">{{ mod.title }}</div>
					</div>
					<!-- 右侧菜单 -->
					<div
						class="side-list right-list"
						v-if="mod.rightMenus && mod.rightMenus.length"
					>
						<div class="side-item" v-for="item in mod.rightMenus" :key="item">
							{{ item }}
						</div>
					</div>
				</div>

				<div class="centerIcon">
					<img src="@/assets/img/arrowIcon.png" alt="arrow" />
				</div>
				<div class="module-group" v-for="(mod, i) in modules.slice(2, 4)" :key="mod.title">
					<!-- 左侧菜单 -->
					<div class="side-list left-list" v-if="mod.leftMenus && mod.leftMenus.length">
						<div class="side-item" v-for="item in mod.leftMenus" :key="item">
							{{ item }}
						</div>
					</div>
					<img src="@/assets/img/yinying1.png" alt="" class="rgPngBox" />
					<!-- 模块图标+标题 -->
					<div class="module">
						<div class="icon-wrap">
							<img v-if="mod.icon" :src="mod.icon" class="module-icon" />
						</div>
						<div class="module-title">{{ mod.title }}</div>
					</div>
					<!-- 右侧菜单 -->
					<div
						class="side-list right-list"
						v-if="mod.rightMenus && mod.rightMenus.length"
					>
						<div class="side-item" v-for="item in mod.rightMenus" :key="item">
							{{ item }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="center-btn">业务中台</div>
	</div>
</template>

<script setup>
import iconKyg from '@/assets/img/iconKygL.png'; // 空域管理
import iconFxfw from '@/assets/img/iconFxfw.png'; // 飞行服务
import iconAqgl from '@/assets/img/iconAqgl.png'; // 安全管理
import iconZngz from '@/assets/img/iconZngz.png'; // 智能感知

const modules = [
	{
		title: '用户需求管理',
		icon: iconKyg,
		leftMenus: ['用户设备注册', '资质认证管理', '巡检订单发布', 'AI任务聚合', '风控服务保障'],
		rightMenus: []
	},
	{
		title: '智能履约巡检',
		icon: iconFxfw,
		leftMenus: ['资源自动匹配', '自动任务调度', 'AI辅助飞行', '实时飞行监控', '飞行记录追踪'],
		rightMenus: []
	},
	{
		title: '生态共筑互赢',
		icon: iconZngz,
		leftMenus: [],
		rightMenus: ['平台资源共享', '飞行资源共享', '算法算力共享', '自动计价核算', '支付结算管理']
	},
	{
		title: '智慧运营决策',
		icon: iconAqgl,
		leftMenus: [],
		rightMenus: ['可视化大屏', '多维数据管理', 'AI分析与报告', '未来趋势预测', '平台服务接口']
	}
];
</script>

<style lang="scss" scoped>
.BusinessCenter {
	width: 840px;
	height: 316px;
	position: relative;
	background: url('@/assets/img/ywztBg.png') no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 18px;
	.center-area {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		bottom: 40%;
		// transform: translateY(24%);
		.center-modules {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 10px;
			.module-group {
				display: flex;
				flex-direction: row;
				align-items: center;
				min-width: 200px;
				position: relative;
				.side-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 6px;
					min-width: 90px;

					.side-item {
						cursor: pointer;
						width: 90px;
						height: 24px;
						background: url('@/assets/img/menuBg.png') no-repeat center center;
						background-size: 100% 100%;
						// background: rgba(0, 255, 255, 0.08);
						border-radius: 12px;
						color: #b6eaff;
						font-size: 14px;
						padding: 3px 14px;
						text-align: left;
						box-shadow: 0 0 8px #0ff2;
						letter-spacing: 1px;
						transition: background 0.2s;
						white-space: nowrap;
						&:hover {
							background: url('@/assets/img/activemenubg.png') no-repeat center center !important;
							background-size: 100% 100% !important;
							// background: rgba(58, 205, 255, 0.18);
							color: #fff;
						}
					}
				}

				.lfPngBox {
					width: 58px;
					height: 212px;
					position: absolute;
					left: 104px;
				}
				.rgPngBox {
					width: 58px;
					height: 212px;
					position: absolute;
					right: 104px;
				}
				.left-list {
					margin-right: 10px;
				}
				.right-list {
					margin-left: 10px;
				}

				.module {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.icon-wrap {
						display: flex;
						align-items: center;
						justify-content: center;
						// margin-bottom: 6px;
						.module-icon {
							width: 90px;
							height: 120px;
							// animation: diamond-rotate 2.5s linear infinite;
							// filter: drop-shadow(0 0 8px #3acdff);
						}
					}
					.module-title {
						position: absolute;
						bottom: 0px;
						color: #fff;
						font-size: 14px;
						text-shadow: 0 2px 8px #0ff;
						// letter-spacing: 1px;
					}
				}
			}

			.centerIcon {
				width: 110px;
				height: 132px;
				margin-top: 42px;
				margin-left: -16px;
				margin-right: -16px;
				animation: arrowUp 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.center-btn {
		z-index: 99;
		width: 141px;
		height: 41px;
		text-align: center;
		line-height: 41px;
		background: url('@/assets/img/titleBg.png') no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 8px;
		letter-spacing: 4px;
		position: absolute;
		bottom: 62px;
		cursor: pointer;
	}
}

@keyframes diamond-rotate {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes arrowUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-16px);
		opacity: 0.7;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
